<!-- 经销商arr -->
<template>
   <div class="dealer">
      <div class="dealer_orders">
         <div class="title">
            经销商销售单数量
         </div>
         <div class="head">
            <div>
               <el-radio-group 
                  v-model="radio" 
                  size="mini"
                  text-color="#6464f7"
                  class="radio_el_owner"
                  @input="getList"
               >
                  <el-radio-button label="1">按月</el-radio-button>
                  <el-radio-button label="2">按周</el-radio-button>
                  <el-radio-button label="3">按天</el-radio-button>
               </el-radio-group>
            </div>
            <div>
               <!-- <CityInit/> -->
            </div>
         </div>
         <div class="center" >
            <ul>
               <li v-for="(item,index) in dealer_orders_list" :key="index">
                  <div style="display: flex;align-items: center;">
                     <div >
                        <i style="font-size: 32px;margin: 0 10px;" :class="`el-icon-medal ${index == 0 ? 'one' : (index == 1 ? 'two' : (index == 2 ? 'three' : ''))}`"></i>
                     </div>
                     <div >
                        <div style="font-weight: 700;">{{index + 1}}. {{ item.name }}</div>
                        <!-- <span style="padding: 2px; box-sizing: border-box;font-size: 12px;border-radius: 3px;border: 1px solid #d5e7f9;color:#6464f7;background-color: #d5e7f9;">{{ item.nation }}{{item.area}}</span> -->
                     </div>
                  </div>
                  <div style="font-weight: 700;font-size: 16px;">
                     {{item.sellOutBillQty}}(单)
                  </div>
               </li>
            </ul>
            <el-divider direction="vertical"></el-divider>
         </div>
      </div>
      
      <div class="dealer_sales">
         <div class="title" style="padding-left: 20px;box-sizing: border-box;">
            经销商销售情况
         </div>
         <div class="dealer_echarts" id="dealer_echarts">

         </div>
      </div>
   </div>
</template>
<script>
import * as echarts from 'echarts';
import {
   disBillHomeSellOutQty,
   disBillHomeSellOutState
} from "@/api/home/dealer";
export default{
   name:"dealer",
   data(){
      return{
         radio:'1',
         value:'',
         dealer_orders_list:[
            // {
            //    name:'广州千百味有限公司',
            //    Ranking:1,
            //    order_quantity:34034,
            //    nation:'中国',
            //    area:"广东省",
            //    color:'one'
            // },
            // {
            //    name:'信阳永盛食有限公司',
            //    Ranking:2,
            //    order_quantity:31112,
            //    nation:'中国',
            //    area:"河南省",
            //    color:'two'
            // },
            // {
            //    name:'成都市豪商贸有限公司',
            //    Ranking:3,
            //    order_quantity:2345,
            //    nation:'中国',
            //    area:"四川省",
            //    color:'three'
            // },
         ],
         dealer_sales_list:[
            // { value: 923, name: '七日内有开单', itemStyle:{color:"#406fe4"}},
            // { value: 342, name: '七日内无开单', itemStyle:{color:"#e75e27"}},
            // { value: 56, name: '从未开单', itemStyle:{color:"#eeb039"}},
         ],
      }
   },
   methods:{
      initialize(){
         let that = this
         let myChart = echarts.init(document.getElementById('dealer_echarts'));
         let option={
            tooltip: {
               trigger: 'item'
            },
            legend: {
               x: 'right',
               left: '50%',
               bottom: 20,
               orient: 'vertical',
               textStyle:{
                  display: "flex",
                  justifyContent: "space-between",
               },
               formatter:function(value,index){
                  var data = that.dealer_sales_list;
                  var total = 0;
                  var val = 0;
                  
                  data.forEach(el => {
                     total += el.value;
                     if(value == el.name) val = el.value
                  });
                  console.log(value);
                  console.log(value ==='从未开单');
                  let a = `${value}\u3000\u3000\u3000\u3000${val}家\u3000\u3000${((val / total)*100).toFixed(2)}%`
                  let b = `${value}\u3000\u3000${val}家\u3000\u3000${((val / total)*100).toFixed(2)}%`
                  return value ==='从未开单' ? a : b 
               },
               
            },
            series: [
               {
                  name: '经销商销售情况',
                  type: 'pie',
                  center: ['30%', '50%'],
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                     show: false,
                     position: 'center',
                     
                  },
                  
                  emphasis: {
                     label: {
                        show: true,
                        fontSize: 12,
                        fontWeight: 'bold'
                     }
                  },
                  labelLine: {
                     show: false
                  },
                  data: this.dealer_sales_list
               }
            ]
         }

         myChart.setOption(option);

         window.addEventListener("resize", function () {
            myChart.resize();
         });
      },
      getList(){

         disBillHomeSellOutQty({
            dateType: this.radio
         }).then((res) => {
            res.data.sort(function(x,y) {return y.sellOutBillQty - x.sellOutBillQty})
            const list = res.data.slice(0, 3);
            this.dealer_orders_list = list
         }).catch((err) => {
            
         });
      },
      getSaleSituation(){

         disBillHomeSellOutState({}).then((res) => {
            console.log(res);
            let list = []
            for (const key in res.data) {
               console.log(key);
               let obj = {}
               switch (key) {
                  case 'sevenDayOpenSellOutBillDisQty':
                     list.push({
                        value: res.data[key], 
                        name: '七日内有开单', 
                        itemStyle:{
                           color:"#406fe4"
                        }
                     })
                     break;
                  case 'sevenDayNotOpenSellOutBillDisQty':
                     list.push({
                        value: res.data[key], 
                        name: '七日内无开单', 
                        itemStyle:{
                           color:"#e75e27"
                        }
                     })
                     
                     break;
                  case 'neverOpenSellOutBillDisQty':
                     list.push({
                        value: res.data[key], 
                        name: '从未开单', 
                        itemStyle:{
                           color:"#eeb039"
                        }
                     })
                     
                     break;
               }
            }
            console.log(list);
            
            this.dealer_sales_list = list
            this.initialize()
         }).catch((err) => {
            this.initialize()
         });
      }
   },
   mounted(){
      this.getSaleSituation()
      this.getList()
   },
}
</script>
<style lang='less'>
.dealer{
   padding:10px 20px;
   box-sizing: border-box;
   display: flex;
   // align-items: center;
   .title{
      font-weight:900;
      color: black;
      font-size: 18px;
      margin: 10px 0;
   }
   .dealer_orders{
      width: 55%;
      .head{
         display: flex;
         justify-content: space-between;
         padding-right: 70px;
         .radio_el_owner{
   
            .el-radio-button{
               //从这里开始 就是更改颜色的代码，将你的颜色 改掉我的颜色就可以了
               .el-radio-button__inner{                               
                  margin-bottom: px(5);
                  background-color:#fff;
                  &:hover{
                     border-color: #6464f7;
   
                  }
                  // &.is-checked {
                  //    .el-radio__inner{
                  //       background-color:#28D4C1;
                  //       border-color:#28D4C1; 
                  //       }
                  // }
                  // .el-radio__inner{
                  //    &:hover{
                  //          border-color:hsl(216, 92%, 51%);
                  //    }
                  // }
               }
            }
         }
      }
      .center{
         display: flex;
         justify-content: space-between;
         ul{
            width: 100%;
            li{
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 10px 100px 10px 30px;
               box-sizing: border-box;
               .one{
                  color: #ffd700;
               }
               .two{
                  color: #c0c0c0;
               }
               .three{
                  color: #b87333;
               }
            }
         }
         .el-divider--vertical{
            height: 12em;
         }
      }
   }
   .dealer_sales{
      flex: 1;
      #dealer_echarts{
         width: 100% !important;
         height: 300px !important;
      }
   }
}
</style>